<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>折线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 谷粒影音数据分析
    <span class="c-gray en">&gt;</span> 层叠图 <a class="btn btn-success radius r"
                                                  style="line-height:1.6em;margin-top:3px"
                                                  href="javascript:location.replace(location.href);" title="刷新"><i
            class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="f-14 c-error">特别声明：ApacheEchart 是一个基于 JavaScript 的开源可视化图表库，仅免费提供给个人学习、个人网站，如果在商业项目中使用，请去Apache
        Echart官网网站购买商业授权。或者您也可以选择其他免费的第三方图表插件，例如HighChart。华清远见不承担任何版权问题。
    </div>
    <!--
    <div id="container" style="min-width:700px;height:400px"></div>
    -->

    <div>
        <br>
        <hr>
        <br>
    </div>
    <div id="container" class="cur" style="min-width:960px;height:820px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>

<!--引入基础的公共类库-->
<script src="include/commons-lib.js"></script>

<script src="auth/auth.js"></script>

<script type="module">
    if(await checkLogin()){
        console.log("已登录....")
    }else{
        console.log('未登录....');
        window.location.href='login.html';
    }
</script>


<script type="text/javascript">
    let chartDom = document.getElementById('container');
    let myChart = echarts.init(chartDom);

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            /*data: ['Comedy', 'UNA', 'Autos', 'Blogs', 'DIY', 'Travel', 'Animation']*/
            data:[]
        },
        series: [
            {
                name: 'No1',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [320, 302, 301, 334, 390, 330, 320]
                data: []
            },
            {
                name: 'No2',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [120, 132, 101, 134, 90, 230, 210]
                data: []
            },
            {
                name: 'No3',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [220, 182, 191, 234, 290, 330, 310]
                data: []
            },
            {
                name: 'No4',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [150, 212, 201, 154, 190, 330, 410]
                data: []
            },
            {
                name: 'No5',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [820, 832, 901, 934, 1290, 1330, 1320]
                data: []
            },
            {
                name: 'No6',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [820, 832, 901, 934, 1290, 1330, 1320]
                data: []
            },
            {
                name: 'No7',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [820, 832, 901, 934, 1290, 1330, 1320]
                data: []
            },
            {
                name: 'No8',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [820, 832, 901, 934, 1290, 1330, 1320]
                data: []
            },
            {
                name: 'No9',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [820, 832, 901, 934, 1290, 1330, 1320]
                data: []
            },
            {
                name: 'No10',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                //data: [820, 832, 901, 934, 1290, 1330, 1320]
                data: []
            }

        ]
    };

    //使用刚刚指定的配置项和数据项显示图表
    myChart.setOption(option);

    function loadTopTenCatalogVideoViewsList(){
        queryTopTenCatalogVideoViewsList().then(resp=>{
            if(resp.data.code === 200){
                console.log(resp.data.data);
                option.yAxis.data = resp.data.data.catalogList;

                for(let i=0;i<10;i++){
                    //let i=0;i<10;i++
                    //option.series[i].data =resp.data.data.videoViewsList[i];
                    //console.log(resp.data.data.videoViewsList[i]);
                    //console.log(option.series[i].data);
                    for(let j=0;j<option.yAxis.data.length;j++){
                        option.series[i].data.push(resp.data.data.videoViewsList[j][i]);
                    }
                }

                //重新刷新图表
                refreshEcharts();
            }
        })
    }

    function refreshEcharts(){
        window.setTimeout(()=>{
            myChart.setOption(option, {replaceMerge: ['yAxis','series']}, true)
            myChart.hideLoading();
        },1000);
    }

    window.onload = loadTopTenCatalogVideoViewsList();

</script>
</body>
</html>